<template>
	<header>
		<h2>{{ wordValue ? wordValue : '你好啊，李银河' }}</h2>
		<div class="input-wrap">
			<input
				type="text"
				placeholder="请输入要查询的字母"
				v-model="wordValue"
				@input="$emit('update:modelValue', $event.target.value)"
			/>
		</div>
	</header>
</template>

<script setup>
import { ref } from 'vue';
// 双向数据绑定
let wordValue = ref('');
// 子传父
defineEmits(['update:modelValue']);
</script>

<style scoped lang="less">
header {
	height: 30vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	h2 {
		font-size: 4vw;
		font-weight: 100;
	}
	input {
		width: 50vw;
		border: none;
		background-color: #282c34;
		border-bottom: 1px solid rgb(197, 188, 188);
		padding: 10px 10px;
		color: #fff;
		font-size: 18px;
		transition: all 0.5s;
		&:focus {
			outline: none;
			border-bottom: 1px solid white;
		}
	}
}
@media (max-width: 1000px) {
	header {
		h2 {
			font-size: 8vw;
		}
		input {
			width: 70vw;
			font-size: 14px;
		}
	}
}
</style>
